<template>
  <div class="mAddressConfig">
    <div class="msearch">
      <search-bar more-display>
        <el-row>
          <el-col :span="8">
            <el-form-item label="省">
              <el-select  v-model="searchCondition.province"
              placeholder="请选择省"  filterable
               @change="getReleatedCitys" @visible-change="clearSelectedCity">
                <el-option
                v-for="(item,index) in provinces"
                :key-value="item.id"
                :label="item.name"
                :value="item.id"
                :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市">
              <el-select  v-model="searchCondition.city"
                         placeholder="请选择市" filterable
                         @change="getReleatedCountys"
                         @visible-change="clearSelectedCounty">
                <el-option
                  v-for="(item,index) in citys"
                  :key-value="item.id"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="区">
              <el-select  v-model="searchCondition.county"
                         placeholder="请选择区"  filterable
                         @change="getReleatedTowns"
              @visible-change="clearSelectedTown">
                <el-option
                  v-for="(item,index) in countys"
                  :key-value="item.id"
                  :label="item.name"
                  :value="item.id" :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="乡镇街道">
              <el-select  v-model="searchCondition.town"
                         placeholder="请选择乡镇街道"  filterable>
                <el-option
                  v-for="(item,index) in towns"
                  :key-value="item.id"
                  :label="item.name"
                  :value="item.id" :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </search-bar>
    </div>
    <el-col :span="24" >
      <el-button type="primary" @click="addAddress" style="margin: 10px">新增</el-button>
      <el-button type="primary" @click="resetSearch" style="margin: 10px;float: right">重置</el-button>
      <el-button type="primary" :loading="searchLoading" @click="searchAddressTree" style="margin: 10px;float: right">查询</el-button>
    </el-col>
    <ue-el-tree-table
    height="700"
    tree-structure
    highlight-current-row
    tree-expand-all
    expand-on-click-node
    border
    @row-click="currentChange"
    :data-source="addressTree">
      <el-table-column prop="typeName" label="类型" width="150">
        <template slot-scope="scope">
          <label v-if="scope.row.level == 1">省</label>
          <label v-if="scope.row.level == 2">市</label>
          <label v-if="scope.row.level == 3">区</label>
          <label v-if="scope.row.level == 4">乡镇街道</label>
        </template>
      </el-table-column>
      <el-table-column label="是否涉及特殊区域或偏远地区" prop="isSpecial" width="220">
        <template slot-scope="scope">
          <label v-if="scope.row.isSpecial === 111002001">是</label>
          <label v-if="scope.row.isSpecial === 111002002">否</label>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </ue-el-tree-table>
    <el-dialog :title="mtitle" size="tiny" :visible.sync="mdialogVisible" :close-on-click-modal="false" >
     <div style="width:350px;margin-left: 150px;">
      <el-form ref="mform" :model="mform" >
        <el-form-item label="省" >
          <el-select v-model="mform.province"
                     placeholder="请选择省份"
                     @change="getReleatedCitys"
                     allow-create
                     filterable
                     remote
                     :remote-method="getProvinceValue"
                     @visible-change="clearFormSelectedCity">
            <el-option
              v-for = "(item,index) in provinces"
              :value-key="item.id"
              :label="item.name"
              :value="item.id" :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市"   >
          <el-select v-model="mform.city"
                     placeholder="请选择市区"
                     @change="getReleatedCountys"
                     allow-create
                     filterable
                     remote
                     :remote-method="getCityValue"
                     @visible-change="clearFormSelectedCounty">
            <el-option
              v-for = "(item,index) in citys"
              :value-key="item.id"
              :label="item.name"
              :value="item.id" :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区"  >
          <el-select v-model="mform.county"
                     placeholder="请选择区域"
                     @change="getReleatedTowns"
                     allow-create
                     filterable
                     remote
                     :remote-method="getCountyValue"
                     @visible-change="clearFormSelectedTown">
            <el-option
              v-for = "(item,index) in countys"
              :value-key="item.id"
              :label="item.name"
              :value="item.id" :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="乡镇街道"  style="margin-left: -42px" >
          <el-select v-model="mform.town"
                     placeholder="请选择乡镇街道"
                     allow-create
                     filterable
                     remote
                     :remote-method="getTownValue">
            <el-option
              v-for = "(item,index) in towns"
              :value-key="item.id"
              :label="item.name"
              :value="item.id" :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <template slot-scope="scope">
            <el-checkbox v-if="countyValue !== null && countyValue !=='' && countyValue !== undefined" v-model="checkedNew" >是否涉及特殊区域或偏远地区</el-checkbox>
          </template>
        </el-form-item>
      </el-form>
      <el-button @click="mdialogVisible = false" style="margin-left: 70px">取消</el-button>
      <el-button type="primary" @click="handleNewAddress">确认</el-button>
     </div>
    </el-dialog>
    <el-dialog size="tiny" :title="mEditName" :visible.sync="mEditialogVisible" :close-on-click-modal="false">
    <div style="margin-left: 100px">
      <el-form>
        <el-form-item label="地域名称" :rules="[{required: true, message: '请输入地域名称', trigger: 'change'}]">
          <el-input v-model="mname"  style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot-scope="scope">
            <el-checkbox v-if="selestedRow.level === 3 || selestedRow.level === 4" v-model="checked" >是否涉及特殊区域或偏远地区</el-checkbox>
          </template>
        </el-form-item>
        <el-button @click="mEditialogVisible = false" style="margin-left: 100px">取消</el-button>
        <el-button type="primary"  @click="handleEditAddress">确认</el-button>
      </el-form>
    </div>
    </el-dialog>
  </div>
</template>
<script>
import {getAllAddress, getAllProvinces, addNewAddress, deletAddressDict, handleEditAddress, getConditionAddress} from '../../api/meb-user/AddressManage';
export default {
  data () {
    return {
      addressTree: [],
      searchLoading: false,
      mdialogVisible: false,
      provinces: [],
      citys: [],
      countys: [],
      towns: [],
      mform: {
        province: null,
        city: null,
        county: null,
        town: null
      },
      checkedNew: false,
      mtitle: '',
      provinceValue: '',
      cityValue: '',
      countyValue: '',
      townValue: '',
      selectedRow: null,
      mEditialogVisible: false,
      mEditName: '编辑',
      mname: '',
      searchCondition: {
        province: null,
        city: null,
        county: null,
        town: null
      },
      selestedRow: null,
      checked: false
    };
  },
  methods: {
    clearSelectedCity () {
      this.searchCondition.city = null;
      this.searchCondition.county = null;
      this.searchCondition.town = null;
    },
    clearSelectedCounty () {
      this.searchCondition.county = null;
      this.searchCondition.town = null;
    },
    clearSelectedTown () {
      this.searchCondition.town = null;
    },
    clearFormSelectedCity () {
      this.mform.city = null;
      this.mform.county = null;
      this.mform.town = null;
    },
    clearFormSelectedCounty () {
      this.mform.county = null;
      this.mform.town = null;
    },
    clearFormSelectedTown () {
      this.mform.town = null;
    },
    getAddressTree (filters = '') {
      getAllAddress({filters: filters}).then(res => {
        if (res.data.successFlg) {
          this.addressTree = res.data.detailModelList;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    currentChange (val) {
      this.selestedRow = val;
      let filters = '';
      if (val.level === 1 && val.children.length === 0) {
        filters = 'level=1;pid=' + val.id;
      }
      if (val.level === 1 && val.children.length !== 0) {
        filters = 'level=1';
      }
      if (val.level === 2 && val.children.length === 0) {
        filters = 'level=1;pid=' + val.pid + ';pid=' + val.id;
      }
      if (val.level === 2 && val.children.length !== 0) {
        filters = 'level=1;pid=' + val.pid;
      }
      if (val.level === 3 && val.children.length === 0) {
        filters = 'level=1;id=' + val.pid + ';pid=' + val.pid + ';pid=' + val.id;
      }
      if (val.level === 3 && val.children.length !== 0) {
        filters = 'level=1;id=' + val.pid + ';pid=' + val.pid;
      }
      if (val.level === 4) {
        return;
      }
      this.getAddressTree(filters);
    },
    addAddress () {
      this.resetmform();
      this.mtitle = '新增';
      this.mdialogVisible = true;
      this.checkedNew = false;
    },
    handleEdit (index, row) {
      this.selectedRow = row;
      this.resetmform();
      this.mEditialogVisible = true;
      this.mname = row.name;
      if (row.isSpecial === 111002001) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    handleDelete (index, row) {
      this.$confirm('确认删除该地址吗？', '提示', {
        type: 'warning'
      }).then(() => {
        if (row.children.length !== 0) {
          return this.$message.error('请先删除该地址的子级地址！');
        }
        deletAddressDict(row.id).then((res) => {
          if (res.data.successFlg) {
            this.$message.success('删除成功');
            this.getAddressTree('level=1');
          }
        });
      });
    },
    handleNewAddress () {
      this.provinceValue = this.mform.province === null ? this.provinceValue : this.mform.province;
      this.cityValue = this.mform.city === null ? this.cityValue : this.mform.city;
      this.countyValue = this.mform.county === null ? this.countyValue : this.mform.county;
      this.townValue = this.mform.town === null ? this.townValue : this.mform.town;
      let checkedNewLabel = 111002002;
      if (this.checkedNew) {
        checkedNewLabel = 111002001;
      }
      addNewAddress(this.provinceValue, this.cityValue, this.countyValue, this.townValue, checkedNewLabel).then((res) => {
        if (res.data.successFlg) {
          this.$message.success('添加成功');
          this.mdialogVisible = false;
          this.getAddressTree('level=1');
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    getProvinces () {
      let filters = 'level=1';
      getAllProvinces({filters: filters}).then((res) => {
        if (res.data.successFlg) {
          this.provinces = res.data.detailModelList;
        }
      });
    },
    getReleatedCitys (val) {
      let filters = 'level=2;pid=' + val;
      getAllProvinces({filters: filters}).then((res) => {
        if (res.data.successFlg) {
          this.citys = res.data.detailModelList;
        }
      });
    },
    getReleatedCountys (val) {
      let filters = 'level=3;pid=' + val;
      getAllProvinces({filters: filters}).then((res) => {
        if (res.data.successFlg) {
          this.countys = res.data.detailModelList;
        }
      });
    },
    getReleatedTowns (val) {
      let filters = 'level=4;pid=' + val;
      getAllProvinces({filters: filters}).then((res) => {
        if (res.data.successFlg) {
          this.towns = res.data.detailModelList;
        }
      });
    },
    getProvinceValue (val) {
      this.provinceValue = val;
    },
    getCityValue (val) {
      this.cityValue = val;
    },
    getCountyValue (val) {
      this.countyValue = val;
    },
    getTownValue (val) {
      this.townValue = val;
    },
    handleEditAddress () {
      if (this.mname === '') {
        this.$message.error('地域名称不能为空');
        return;
      }
      let isSpecialCode = 111002002;
      if (this.checked) {
        isSpecialCode = 111002001;
      }
      handleEditAddress(this.selectedRow.id, this.mname, isSpecialCode).then((res) => {
        if (res.data.successFlg) {
          this.$message.success('编辑成功');
          this.mEditialogVisible = false;
          this.getAddressTree('level=1');
        }
      });
    },
    searchAddressTree () {
      let mfilters = '';
      if (this.searchCondition.province !== null && this.searchCondition.city === null && this.searchCondition.county === null && this.searchCondition.town === null) {
        mfilters = 'id=' + this.searchCondition.province + ';';
      } else if (this.searchCondition.city !== null && this.searchCondition.county === null && this.searchCondition.town === null) {
        mfilters = 'id=' + this.searchCondition.city + ';';
      } else if (this.searchCondition.county !== null && this.searchCondition.town === null) {
        mfilters = 'id=' + this.searchCondition.county + ';';
      } else if (this.searchCondition.town !== null) {
        mfilters = 'id=' + this.searchCondition.town + ';';
      } if (this.searchCondition.province === null && this.searchCondition.city === null && this.searchCondition.county === null) {
        this.getAddressTree('level=1');
        return;
      }
      this.searchLoading = true;
      getConditionAddress({filters: mfilters}).then(res => {
        if (res.data.successFlg) {
          this.searchLoading = false;
          this.addressTree = res.data.detailModelList;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    resetSearch () {
      for (let p in this.searchCondition) {
        this.searchCondition[p] = null;
      }
      this.getAddressTree('level=1');
    },
    resetmform () {
      for (let p in this.mform) {
        this.mform[p] = null;
      }
      this.provinceValue = '';
      this.cityValue = '';
      this.countyValue = '';
      this.townValue = '';
    }
  },
  mounted () {
    this.getProvinces();
    this.getAddressTree('level=1');
  }
};
</script>
<style lang="less">
  .mAddressConfig {

  }
</style>
